import React from 'react'
import ReactEcharts from 'echarts-for-react';
// import ReactEchartsCore from 'echarts-for-react/lib/core';
// import echarts from 'echarts/lib/echarts';
// import 'echarts/lib/chart/bar';  
import './css/Graph.css'
class Graph extends React.Component {
    componentWillMount = () => { 
    }   
    constructor(props) {
        super(props) 
        this.state = { 
        }
    }
    config={
        key:'s_department_flood_info',//数据来源
        blockStyle:{
            h:50,  
            w:130, 
            fontSize:18
        },
        firstTreeClick:(params)=>{ 
            this.props.onChange && (this.props.onChange({
                dep_type: params.data.dep_type,
                id: params.data.id,
                name: params.data.name,
                origin_id: params.data.origin_id,
                pid: params.data.pid
            }))
        },
        secTreeClick:(params)=>{ 
            this.props.onChange && (this.props.onChange({
                dep_type: params.data.dep_type,
                id: params.data.id,
                name: params.data.name,
                origin_id: params.data.origin_id,
                pid: params.data.pid
            }))
        }
    }
     info={
        boxW:300,
        boxH:200,
        nodesShow:[],//节点
        linkNodes:[],//线的节点
        linkDatas:[],//线的数据
        nodesShowC:[],//子节点显示的块
        linkNodesC:[],//子节点 线的nodes
        linkDatasC:[],//子节点 线的头尾
        linkNodesCL:100,//组件距离左边的px
        linkNodesCR:100,//组件距离右边的px 
        childrenShow:false,
        hasChildIndex:0,//有子节点的索引
        hasChildDa:[],//有子节点的那一行数据（子节点父级的数据）
        symw:10,//子节点的图标大小
        losition:{
            firstS:[100],
            twoS:[100], 
           threeS:[100], 
            distance:50,//垂直20px间距
        }
    } 
    boxWC = 0;  
    boxHC=200; 
    myChart={};  
    componentDidMount = () => {   
       if(this.props.config !== undefined) this.config = Object.assign(this.config,this.props.config); 
        this.myChart = this.echarts_react.getEchartsInstance(); 
        let secTreeC = this.childrenTree.getEchartsInstance(); 
        this.getData();   
        let that=this;
        let flag=true;
        this.myChart.on('click', (params) => { //一级 二级
            if(params.data.nextFlagS){//加号点击   
                if(flag){
                    flag=false;
                      that.info.childrenShow =true; 
                }else{
                    that.info.childrenShow =false; 
                    flag=true;
                }
              that.setState({  }) 
            }else{//弹窗
                that.config.firstTreeClick(params) 
            }
        }); 
        secTreeC.on('click', (params) => { //三级
            if(params.data.nextFlagS){//加号点击   
                if(flag){
                    flag=false;
                      that.info.childrenShow =true; 
                }else{
                    that.info.childrenShow =false; 
                    flag=true;
                }
              that.setState({  }) 
            }else{//弹窗
                that.config.secTreeClick(params) 
            }
        }); 
        
    } 
    proDataFn=(result)=>{   
        this.info.boxH = this.config.blockStyle.h*3+this.info.losition.distance+25;//20是蓝色球的大小
        let w = this.config.blockStyle.w;
        let h =this.config.blockStyle.h  ; 
        let proD =[]; 
        let xFirStart =  this.info.losition.firstS[0]; 
        let xTwoStart =  this.info.losition.twoS[0];  
        let xThreeStart =  this.info.losition.threeS[0];

        let label={
            normal: {
            show: true, 
            position: 'inside',  
            formatter: function(params) {
                return '{popup|'+params.data.name+'}'
            },
            rich: {
                popup: {
                    align: 'center', color: '#fff',     backgroundColor: '#908B8B',    height:h,      width:w,      fontSize:this.config.blockStyle.fontSize   
                }
            },
            color: '#fff', 
        } 
    }
         this.info.nodesShow=[];     
             result.map((item,i)=>{
                let num=0;
                for(let k=0;k<result.length;k++){
                    if(item.pid==parseInt(result[k].id)){ 
                    }else{//
                        num++  ;
                         if(num==result.length){  //第一级
                             item.nextFlag=true;
                            let yFirst=  this.config.blockStyle.h+this.info.losition.distance;
                            // let xSpacing = 0.5;//间距  
                            item.x=xFirStart;
                            item.y=yFirst;
                            item.w=w;
                            item.h=h;
                            item.data=[];  
                            item.label=label;                             
                            item.symbolSize= [w-20,h-10];  
                            switch(item.status){
                                case 1://无应急
                                item.label.normal.rich.popup.backgroundColor='#908B8B';
                                break;
                                 case 2://已接收
                                item.label.normal.rich.popup.backgroundColor='#67D958';
                                break;
                                 case 3://已反馈
                                item.label.normal.rich.popup.backgroundColor='#FFBB38';
                                break;
                            }
                            proD.push(item);   
                            this.info.nodesShow.push(item)  ; 
                            let s=0;
                             this.info.boxW =w;
                            proD.map((item,i)=>{ 
                                result.map((jtem,j)=>{
                                    if(jtem.pid==parseInt(item.id)){ //第二级,第二级的pid=第一级的id 
                                        let xSpacing =10;//间距  
                                        jtem.x=xTwoStart;
                                        jtem.y=yFirst+this.config.blockStyle.h*2+this.info.losition.distance;
                                        jtem.w=w;
                                        jtem.h=h; 
                                        jtem.data=[]; 
                                        jtem.symbolSize= [w-20,h-10];  
                                        jtem.label=label; 
                                           switch(jtem.status){
                                                case 1://无应急
                                                jtem.label.normal.rich.popup.backgroundColor='#908B8B';
                                                break;
                                                case 2://已接收
                                                jtem.label.normal.rich.popup.backgroundColor='#67D958';
                                                break;
                                                case 3://已反馈
                                                jtem.label.normal.rich.popup.backgroundColor='#FFBB38';
                                                break;
                                            }
                                        this.info.nodesShow.push(jtem)  ; 
                                        item.data.push(jtem);    
                                        xTwoStart =xTwoStart+w+xSpacing; 
                                         this.info.boxW =  xTwoStart; 
                                    }else{//第三级,第三级的pid=第二级的id ,子节点  
                                            item.data.map((ztem,z)=>{
                                                if(jtem.pid==parseInt(ztem.id)){  
                                                    ztem.nextFlag=true; 
                                                    let xSpacing = 10;//图标大小
                                                    jtem.x=xThreeStart;
                                                    jtem.y=   this.config.blockStyle.h+this.info.losition.distance ;
                                                    jtem.w=w;
                                                    jtem.h=h;   
                                                    jtem.data=[];   
                                                    jtem.symbolSize= [w-20,h-10];  
                                                    jtem.label=label; 
                                                    switch(jtem.status){
                                                        case 1://无应急
                                                        jtem.label.normal.rich.popup.backgroundColor='#908B8B';
                                                        break;
                                                        case 2://已接收
                                                        jtem.label.normal.rich.popup.backgroundColor='#67D958';
                                                        break;
                                                        case 3://已反馈
                                                        jtem.label.normal.rich.popup.backgroundColor='#FFBB38';
                                                        break;
                                                    }
                                                    ztem.data.push(jtem); 
                                                    xThreeStart = xThreeStart+w+xSpacing;       
                                                                                         
                                                }
                                            })
                                    }  
                                }) 
                            }) 
                        }   
                    }
                }  
            })   
        this.linkProFn(proD)
       
    }

    linkProFn=(proD)=>{ 
        let linkTemp=[];  //线的头尾
        let linkNodesTemp=[];//线的点
        let oldNode='';   
        let oldNodeC='';
        proD.map((item,i)=>{
            let templinknode={
                    y: item.y,
                    x:item.x, 
                    name: item.name,                              
                    w:item.w,
                    h:item.h,
                    symbol: 'RECT', 
            };   
            linkNodesTemp.push(templinknode); 
            if(item.data){
                item.data.map((jtem,i)=>{//第二级
                    let templinknode={
                            y: jtem.y,
                            x:jtem.x, 
                            w:jtem.w,
                            h:jtem.h,
                            name:  jtem.name+'_e',   
                            symbol:jtem.symbol,
                            symbolSize: 0,
                    };   
                    linkNodesTemp.push(templinknode);
                    let   midnode={ 
                        y: jtem.y-this.info.losition.distance-this.config.blockStyle.h,
                        x:jtem.x, 
                        w:jtem.w,
                        h:jtem.h,
                        name:  jtem.name+'_s',   
                        symbol: 'RECT',
                        symbolSize: 0,  
                    }  
                    linkNodesTemp.push(midnode); 
                    linkTemp.push({//连接线的头尾 
                        source: jtem.name+'_s',  
                        target:   jtem.name+'_e'
                    }) 
                    if(jtem.name.indexOf('_s')<0){
                            linkTemp.push({//连接线的头尾
                                source: jtem.name+'_s',  
                                target:   oldNode,
                            }) 
                    }
                     oldNode =  jtem.name+'_s';  
                     
                    // if(i==7){//有下一级
                    if(jtem.nextFlag){//有下一级
                          templinknode.nextFlagS=true; 
                          templinknode.symbolSize=10;
                          templinknode.symbol='image://'+'./assets/icon_circle.png';
                          templinknode.symbolOffset=[0,25] ;
                         this.info.hasChildIndex = i;
                          this.info.hasChildDa = item.data;   
                    }

                    if(jtem.data&&jtem.data.length>0){//第三极   
                        this.boxHC = this.config.blockStyle.h*2+this.info.losition.distance*3/2;    
                        this.boxWC =  this.info.losition.threeS[0] *2+ this.info.symw*jtem.data.length+this.config.blockStyle.w*(jtem.data.length-1);  
                           
                        
                        //第二级连接第三级的垂直线  
                        if(this.info.hasChildIndex==0){
                                this.info.linkNodesC.push(
                                    {
                                        y:0, 
                                        x:  jtem.data[0].x,   
                                        symbolSize:2,
                                        name:'twoLs'
                                },  {
                                    y: this.info.losition.distance/2, 
                                    x: jtem.data[0].x,   
                                    symbolSize:2,
                                    name:'twoLe'
                                }  )    
                                this.info.linkNodesCL =100;                                
                                
                        }else if(this.info.hasChildIndex>0&& this.info.hasChildIndex< this.info.hasChildDa.length-1){
                            this.info.linkNodesC.push({
                                y:0, 
                                x:this.boxWC/2,   
                                symbolSize:2,
                                name:'twoLs'
                            },{
                                y:  this.info.losition.distance/2, 
                                x:  this.boxWC/2,   
                                symbolSize:2,
                                name:'twoLe'
                            })                           
                        }else{
                                this.info.linkNodesC.push({
                                    y:0, 
                                    x:  jtem.data[1].x-6,   
                                    symbolSize:2,
                                    name:'twoLs'
                                },{
                                    y: this.info.losition.distance/2,  
                                    x:  jtem.data[1].x-6,
                                    symbolSize:2,
                                    name:'twoLe'
                                })   
                                this.info.linkNodesCR =100-this.info.symw;  
                        }

                        this.info.linkDatasC.push({
                            source: 'twoLs',  
                            target:   'twoLe',
                        }) 

                        jtem.data.map((ktem,k)=>{   
                            this.info.linkNodesC.push({
                                y:this.config.blockStyle.h*2+this.info.losition.distance/2,
                                // y: ktem.y, 
                                x:ktem.x, 
                                w:ktem.w,
                                h:ktem.h,   
                                name:ktem.name,     
                                symbolSize: ktem.symbolSize,  
                                 label: ktem.label, 
                                dep_type: ktem.dep_type,
                                cid: ktem.id, 
                                origin_id: ktem.origin_id,
                                pid: ktem.pid
                            });
                            let   midnode={  
                                // y: ktem.y-this.info.losition.distance,
                                y: this.info.losition.distance/2,
                                symbolSize: 2,
                                x:ktem.x, 
                                name:ktem.name+'_s',
                            }   
                            this.info.linkNodesC.push(midnode); 
                            this.info.linkDatasC.push({//连接线的头尾 
                                source:midnode.name, 
                                target:ktem.name
                            }) 
                            if(ktem.name.indexOf('_s')<0){
                                this.info.linkDatasC.push({
                                    source: midnode.name,
                                    target:   oldNodeC,
                                }) 
                            }
                            oldNodeC =  ktem.name+'_s';  

                         })  
                     } 
                }) 
            }
 
        }) 
        if( this.info.nodesShow.length>0){//第一级连接第二级的垂直线
             this.info.nodesShow[0].x = this.info.boxW/2;//第一级节点的位置重置 
            linkNodesTemp[0].x= this.info.boxW/2; 
            linkNodesTemp.push({
                y:linkNodesTemp[0].y+this.config.blockStyle.h,
                symbolSize: 2,
                x:linkNodesTemp[0].x, 
                name:'firstLC'
            })
            linkTemp.push({
                source: linkNodesTemp[0].name,  
                target:   'firstLC',
            }) 
        } 

        this.info.linkNodes =linkNodesTemp;
        this.info.linkDatas =linkTemp;    
        this.setState({})  
        this.myChart.resize();
        this.childrenTree.getEchartsInstance().resize(); 

    }
 

     // 数据请求
    getData = () =>{
       let that = this; 
        T.ajax({
        key: this.config.key,
        data: {},
        success: function success(result) {
               let data =  JSON.parse(result).data;   
           
               that.proDataFn(data); 
            }
        });
    }
    render() {   
 
        let  option = {    
            // backgroundColor:'red',
            series: [
                {    
                    name: 'pointsData',//点
                    type: 'graph',
                    zlevel: 2, 
                    symbol: 'rect',   
                    silent: false,   
                    data: this.info.nodesShow   
                 }, 
            { 
                 name: 'linksData',//线
                type: 'graph',
                silent: false,  
                zlevel: 1,          
                right: this.info.losition.twoS[0],
                left: this.info.losition.twoS[0], //左右边距100
                lineStyle: {
                    normal: {     width: 2,    color: '#333'  }
                },
                symbolSize: 5, 
                data: this.info.linkNodes,
                links: this.info.linkDatas,
            }
            ], 
        }; 
        let  childrenTreeOp = {       
            // backgroundColor:'pink',
            series: [ 
            {  
                name: 'linksData',//线
                type: 'graph',  
                zlevel: 3,    
                symbol: 'rect',  
                silent: false, 
                symbolSize:  5,  
                top:'top',
                right: this.info.linkNodesCR, 
                left:this.info.linkNodesCL,
                lineStyle:  option.series[1].lineStyle,
                data: this.info.linkNodesC,
                links: this.info.linkDatasC,
            }
            ], 
        }; 
        let left=0,right=0;
        if(this.info.hasChildIndex==0){
            left=0
        }else if(this.info.hasChildIndex>0&& this.info.hasChildIndex< this.info.hasChildDa.length-1){
          //  left=  this.info.hasChildDa[this.info.hasChildIndex].x +this.info.hasChildIndex*6-(this.boxWC/2)-6;
            left='inherit';
            var nums =  this.info.hasChildDa.length- 1- this.info.hasChildIndex;
          
            right=nums==1?nums*(this.config.blockStyle.w+10)  - (this.config.blockStyle.w/2) +'px' :nums*(this.config.blockStyle.w+10)  - (this.config.blockStyle.w/2) + nums*2 +'px';
 
        }else{
            left =this.info.boxW-this.boxWC;
            right = 'inherit';
        }
        return ( 
                <div className='Graph'  style={{height: this.info.boxH+ this.boxHC,width:this.info.boxW>this.boxWC?this.info.boxW:this.boxWC,textAlign:'right'}} >  
                   <div style={{height: this.info.boxH,width:this.info.boxW}} >
                       <ReactEcharts   ref = { (e) => {this.echarts_react = e}}  option={option}   style={{height: this.info.boxH,width:this.info.boxW}}   />  
                    </div>   
                     <div  style={{ display:this.info.childrenShow?'inline-block':'none', left:left,right,right, position:'absolute',height:  this.boxHC,width: this.boxWC}} >
                         <ReactEcharts    ref = {(e) => { this.childrenTree = e}}  option={childrenTreeOp}   style={{height:  this.boxHC,width: this.boxWC}}/>  
                   </div>
                </div>  
        )
    }
}
export default Graph